import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Animated,
    Platform,
    TouchableNativeFeedback,
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import StorageUser from '../lib/plugins/StorageUser';
import NavigationBar from '../components/NavigationBar';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');
export default class BankCardList extends Component{
    constructor(props) {
        super(props);
        
        this.state = {
            cardList:this.props.navigation.state.params.cardList,
            index:this.props.navigation.state.params.num,
        };
        
    }
    

    renderItem(){
        var $this = this;
        var list = this.state.cardList;
        var select = false;
        return(
            list.map((item,i)=>{
                if($this.state.index==i){
                    select = true;
                }else{
                    select = false;
                }
                var name = item.card_type.split('-')[0]+'（'+item.card_num.slice(-4)+'）';
                return(
                    <View key={i}>
                        <CardItem onPress={()=>this.selectItem(item,i)} name={name} details={''} select={select}/>
                    </View>
                )
            })
        )
    }
    
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'选择银行卡'} 
                    leftPress={()=>this.goBack()}/>
                <ScrollView>
                    <View style={{height:40,justifyContent:'center',paddingLeft:10}}>
                        <Text>选择到账银行卡</Text>
                    </View>
                    <View style={{borderTopWidth:1,borderTopColor:'#ccc'}}>
                        {this.renderItem()}
                    </View>
                </ScrollView>
                
            </View>
        )
    }
    // 返回按钮
    goBack(){
        this.props.navigation.goBack();
    }
    // 选择银行
    async selectItem(item,index){
        await this.setState({
            index:index
        })
        this.props.navigation.state.params.upData(item,index);
        this.goBack();
    }
    


}

class CardItem extends Component{
    render(){
        var select = this.props.select;
        return(
            <TouchableOpacity onPress={this.props.onPress}>
                <View style={styles.itemBox}>
                    <View style={styles.leftBox}>
                        <Text style={{color:'#333',fontSize:16}}>{this.props.name}</Text>
                        <Text style={{fontSize:14}}>{this.props.details}</Text>
                    </View>
                    <View style={styles.imgBox}>
                        {select?<ImageWrapper icon={'selected'}/>:<Text></Text>}
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    },
    itemBox:{
        flexDirection:'row',
        alignItems:'center',
        height:70,
        backgroundColor:'#fff',
        paddingLeft:10,
        paddingRight:10,
        borderBottomWidth:1,
        borderBottomColor:'#ccc'
    },
    imgBox:{
        width:30,
        height:30
    },
    leftBox:{
        flex:1
    }

});